<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>小米手机5</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-2.0.3.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
		* {
			box-sizing: border-box;
		}
		html,body {
			height: 100%;
			margin: 0 ;
			padding: 0;
			border: 0;
			background-color: #ffffff;
		}
		.shoubu2 {
			width: 100%;
			height: auto;
			text-align: center;
			display:flex;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;
		}
		.tu11 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		b {
			font-size: 0.35rem;
			margin: 0.15rem;
		}
		.tu2 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		.tu4z {
			width: 6rem;
			height: 6rem;
			margin-top: 1rem;
			margin-bottom: 0.5rem;
		}
		.fanhiu {
			float: right;
		}
		.jieshao {
			width: 100%;
		}
		h3 {
			font-size: 0.32rem;
			margin-left: 0.5rem;
		}
		h4 {
			font-size: 0.2rem;
			color: #999;
			margin-left: 0.5rem;
		}
		span {
			color: orangered;
		}
		.jieshao p {
			font-size: 0.3rem;
			display: inline;
			margin-left: 0.5rem;
			background-color: #f1f1f1;
		}
		.tiujian {
			width: 100%;
			height: 0.7rem;
			background-color: #f1f1f1;
			/*border: 1px solid #cccccc;*/
			/*display:flex;*/
			/*justify-content: space-between;*/
		}
		.ztu {
			width: 100%;
			background-color: #f1f1f1;
			display: flex;
			justify-content: space-around;
			/*height: 2.5rem;*/
			/*border: 1px solid #cccccc;*/
			/*margin-top: 1.5rem;*/
			/*margin-left: 2rem;*/
		}
		.tiujian h3 {
			width: 100%;
			height: 0.5rem;
		}
		.ztu img {
			width: 3.87rem;
			height: 2rem;
		}
		.kong {
			width: 100%;
			height: 1rem;
			background-color: #f1f1f1;
		}
		.gaishu {
			width: 100%;
			margin-top: 0.1rem;
			display: flex;
			justify-content: space-around;
		}
		.gaishu p {
			font-size: 0.3rem;
			/*border: 1px solid aliceblue;*/
			/*display: inline;*/
			/*justify-content: space-around;*/
			/*margin: 0 auto;*/
			/*display: flex;*/
		}
		.duotu {
			width: 100%;
		}
		.duotu img {
			width: 100%;
		}
		.wei {
			display:flex;
			justify-content: space-around;
			width: 100%;
			height: 0.6rem;
			background: #fff;
			border: 1px solid #ccc;
			/*text-align: center;*/
			position: fixed;
			bottom: 0;
		}
		.wei img {
			width: 0.5rem;
			height: 0.5rem;
		}
		.btn-warning {
			font-size: 0.3rem;
			width: 5rem;
		}
		.qingchu {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="shoubu2">
		<a href="小米.html">
			<img class="tu11" src="jiantou.png" alt=""/>
		</a>
		<a href="#">
			<img class="tu4z" src="T1LhK_B5Cv1RXrhCrK.jpg">
		</a>
		<a href="#">
			<img class="tu2" src="sousuo.png" alt=""/>
		</a>
	</div>
<div class="jieshao">
	<img class="fanhiu" src="fanhiu.png" alt=""/>
	<h3>小米手机5 标准版 3GB + 32GB / 3D玻璃</h3>
	<h4><span>1999元</span></h4>
	<h4><span>【明早10点开售】</span>骁龙820处理器 / UFS 2.0 闪存 / 4轴防抖相机 / 16颗灯省电高亮屏幕 / 全功能NFC / 4G+ 网络</h4>
	<p>白色</p>
	<p>黑色</p>
	<p>金色</p>
	<p>淡紫色</p>
</div>
<div class="tiujian">
	<h3>为您推荐</h3>
	</div>
	<div class="ztu">

		<img src="aa.jpg" alt=""/>

		<img src="bb.jpg" alt=""/>

		<img src="cc.jpg" alt=""/>

		<img src="dd.jpg" alt=""/>

	</div>
	<div class="kong"></div>
<div class="gaishu">
	<p>概述</p>
	<p>图集</p>
	<p>参数</p>
	<p>意外保</p>
</div>
<div class="duotu">
	<img src="T11VW_B5E_1RXrhCrK.jpg" alt=""/>
	<img src="T1la_gB_Av1RXrhCrK.jpg" alt=""/>
	<img src="T1F3djBbDT1RXrhCrK.jpg" alt=""/>
	<img src="T171LjBXZv1RXrhCrK.jpg" alt=""/>
	<img src="T1FTYvBydg1RXrhCrK.jpg" alt=""/>
	<img src="T1gVA_Bshv1RXrhCrK.jpg" alt=""/>
	<img src="T1NjJjBXCv1RXrhCrK.jpg" alt=""/>
	<img src="T1xVD_B_Jv1RXrhCrK.jpg" alt=""/>
	<img src="T1O3bvB__v1RXrhCrK.jpg" alt=""/>
	<img src="T1.Jb_BsCv1RXrhCrK.jpg" alt=""/>
	<img src="T1DWC_Bvdv1RXrhCrK.jpg" alt=""/>
	<img src="T1gCWQBbZT1RXrhCrK.jpg" alt=""/>
	<img src="T1P_V_BQWv1RXrhCrK.jpg" alt=""/>
	<img src="T1WBC_BQhv1RXrhCrK.jpg" alt=""/>
	<img src="T1JbYgB7bv1RXrhCrK.jpg" alt=""/>
	<img src="T1pMEjBCbv1RXrhCrK.jpg" alt=""/>
	<img src="T1lYKvBbEv1RXrhCrK.jpg" alt=""/>
</div>
	<div class="wei">
		<a href="小米.html">
				<img src="weitu11.png" alt=""/>
		</a>
		<a href="#">
				<button type="button" class="btn btn-warning">明早10点开售</button>
		</a>
		<a href="购物车.html">
				<img src="weitu33.png" alt=""/>
		</a>
		<div class="qingchu"></div>
	</div>
</body>
</html>
<script>
	$(function(){
		function fullwidth() {
			if ($('body').width() >= 720){
				$('html').css('font-size',100 + 'px');
				return;
			}
			var scale = $('body').width() / 720;
			$('html').css('font-size',100*scale + 'px');
		}
		fullwidth();
		$(window).resize(function(){
			fullwidth();
		})
	});
</script>